<template>
	<view>
		<u-toast ref="uToast" />
		<view class="relocation-content">
			<view class="relo-header">
				<uni-forms ref="form" :modelValue="params" :label-width="50">
					<uni-forms-item label="容器条码" name="contNo" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="inputSelect" size="small" id="inputSelect" focus suffixIcon="search"
							trim="all" @focus="_inputFocus" v-model="params.contNo" maxlength="8" placeholder="请输入容器条码"
							confirm-type="search" @confirm="handleSearch()" @iconClick="handleSearch"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
			<swiper class="task-text" :current="currentIndex" :duration="500" @change="currentChange">
				<swiper-item v-for="item in listData" :key="item.taskId" class="form-swiper">
					<uni-row class="swiper-item">
						<uni-col :span="8">
							<text>ID：</text>
							<view class="swiper-content">
								{{item.taskId}}
							</view>
						</uni-col>
						<uni-col :span="8">
							<text>任务类型：</text>
							<view class="swiper-content">
								{{item.taskType}}
							</view>
						</uni-col>
						<uni-col :span="8">
							<text>子类型：</text>
							<view class="swiper-content">
								{{item.taskSubType}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>容器条码：</text>
							<view class="swiper-content">
								{{item.contNo}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>器材编号：</text>
							<view class="swiper-content">
								{{item.spuNo}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>器材名称：</text>
							<view class="swiper-content">
								{{item.spuName}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>创建日期：</text>
							<view class="swiper-des">
								{{item.createDate}}
							</view>
						</uni-col>
					</uni-row>
				</swiper-item>
			</swiper>
			<uni-pagination :show-icon="true" :total="total" :pageSize="1" :current="currentIndex + 1" title="标题文字"
				@change="handleChange" />
		</view>
	</view>
</template>

<script>
	import {
		taskSearch
	} from '@/api/request.js'
	export default {
		name: 'rf-form',
		data() {
			return {
				listData: [],
				params: {
					contNo: '',
					flag: "query",
					limit: 100,
					page: 1,
				},
				labelAlign: 'right',
				total: 1,
				currentIndex: 0
			};
		},
		methods: {
			// 轮播下标更新
			currentChange({
				detail
			}) {
				this.currentIndex = detail.current
			},
			// 输入框聚焦全选
			_inputFocus(event) {
				document.querySelector('#inputSelect input').select()
			},
			// 翻页
			handleChange(e) {
				this.params.page = e.current
				this.query()
			},
			// 搜索按钮点击
			handleSearch() {
				if (!this.params.contNo) {
					return
				}
				console.log("容器条码为",this.params.contNo)
				this.query()
			},
			// 搜索列表
			query() {
				uni.showLoading()
				taskSearch(this.params, (res) => {
					console.log("result:",res.data)
					if (res.code === 0 && res.data.total!=0) {
						this.listData = res.data.list
						this.total = res.data.total
					} else {
						this.listData = {}
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: `未查询到容器[${this.params.contNo}]相关任务`,
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import url("@/static/styles/form.scss");
</style>
<style scoped>
	::v-deep .is-disabled {
		color: black;
	}
	
	.task-text {
		// margin-top: 20px;
		height: 250px;
		padding: 15px;
		border: 1px solid #cddef0;
		border-radius: 10px;
		margin: 10px;
		.form-swiper {
			border: 1px solid #ebeef5;
			// box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			border-radius: 8px;
			padding: 20px;
			box-sizing: border-box;
		}
	}
</style>